/* 项目分配 */
<template lang="html">
  <div class="myProjectArrange">
    <tabs :value="tabsName" @on-click="tabsClick">
      <TabPane label="待分配" name="load">
        <card>
          <p slot="title">待分配</p>
          <Table border :loading="loading" :columns="loadColumns" :data="listDatas"></Table>
          <Row>
            <Col span="24">
            <Page @on-change="changePage" :total="total" style="float: right;padding-top: 10px" />
            </Col>
          </Row>
        </card>
      </TabPane>
      <TabPane label="已分配" name="allow" @on-click="chengeFp">
        <card>
          <p slot="title">已分配</p>
          <Table border :loading="loading" :columns="allowColumns" :data="listDatas"></Table>
          <Row>
            <Col span="24">
            <Page @on-change="changePage" :total="total" style="float: right;padding-top: 10px" />
            </Col>
          </Row>
        </card>
      </TabPane>
    </tabs>

    <!-- 总公司项目分配 -->
    <Modal title="总公司项目分配" v-model="allocationModalZong" class-name="vertical-center-modal" @on-ok="submitFP(0)">
      <Form :model="info_zong" label-position="right" :label-width="100">
        <FormItem label="项目负责人">
          <Input v-model="info_zong.Perject_leader_lable" @on-focus="show('gcs', 'zong', 'Perject_leader_lable', 'Perject_leader')"></Input>
          <p style="text-align:right">工程师库</p>
        </FormItem>
        <FormItem label="项目组成员">
          <Input v-model="info_zong.Staff_name_lable" @on-focus="show('ry', 'zong', 'Staff_name_lable', 'Staff_name')"></Input>
          <p style="text-align:right">人员库</p>
        </FormItem>
        <FormItem label="初审工程师">
          <Input v-model="info_zong.Cname_lable" @on-focus="show('gcs', 'zong', 'Cname_lable', 'Cname')"></Input>
          <p style="text-align:right">工程师库</p>
        </FormItem>
        <FormItem label="复审工程师">
          <Input v-model="info_zong.Fname_lable" @on-focus="show('gcs', 'zong', 'Fname_lable', 'Fname')"></Input>
          <p style="text-align:right">工程师库</p>
        </FormItem>
        <FormItem label="终审工程师">
          <Input v-model="info_zong.Zname_lable" @on-focus="show('gcs', 'zong', 'Zname_lable', 'Zname')"></Input>
          <p style="text-align:right">工程师库</p>
        </FormItem>
      </Form>
    </Modal>

    <!-- 分公司项目分配 -->
    <Modal title="分公司项目分配" v-model="allocationModalFen" class-name="vertical-center-modal" @on-ok="submitFP(2)">
      <Form :model="info_fen" label-position="right" :label-width="100">
        <FormItem label="初审工程师">
          <Input v-model="info_fen.Cname_lable" @on-focus="show1('gcs', 'fen', 'Cname_lable', 'Cname')"></Input>
          <p style="text-align:right">工程师库</p>
        </FormItem>
        <FormItem label="复审工程师">
          <Input v-model="info_fen.Fname_lable" @on-focus="show1('gcs', 'fen', 'Fname_lable', 'Fname')"></Input>
          <p style="text-align:right">工程师库</p>
        </FormItem>
        <FormItem label="终审工程师">
          <Input v-model="info_fen.Zname_lable" @on-focus="show1('gcs', 'fen', 'Zname_lable', 'Zname')"></Input>
          <p style="text-align:right">工程师库</p>
        </FormItem>
      </Form>
    </Modal>

    <!-- 分公司项目分配————负责人分配 -->
    <Modal title="分公司项目分配————负责人分配" v-model="allocationModalFzr" class-name="vertical-center-modal" @on-ok="submitFP(1)">
      <Form :model="info_fenFzr" label-position="right" :label-width="100">
        <FormItem label="项目组成员">
          <Input v-model="info_fenFzr.Staff_name_lable" @on-focus="show('ry', 'fenFzr', 'Staff_name_lable', 'Staff_name')"></Input>
          <p style="text-align:right">项目组成员</p>
        </FormItem>
        <FormItem label="一审工程师">
          <Input v-model="info_fenFzr.fname_lable" @on-focus="show('gcs', 'fenFzr', 'fname_lable', 'fname')"></Input>
          <p style="text-align:right">一审工程师</p>
        </FormItem>
        <FormItem label="二审工程师">
          <Input v-model="info_fenFzr.zname_lable" @on-focus="show('gcs', 'fenFzr', 'zname_lable', 'zname')"></Input>
          <p style="text-align:right">二审工程师</p>
        </FormItem>
      </Form>
    </Modal>

    <!-- 工程师库 -->
    <Modal title="工程师库" v-model="engineerModel" width="800" class-name="vertical-center-modal" @on-ok="clickModelOk('checkBox', 'checkBox_lable')">
      <Table highlight-row :loading="engineerLoad" :columns="engineerColumns" :data="engineerListData"></Table>
      <Page style="margin-top: 10px;" @on-change="getEengineerlList" :total="engineerTotal" />
    </Modal>

    <!-- 人员库 -->
    <Modal title="人员库" v-model="personnelModel" width="800" class-name="vertical-center-modal" @on-ok="clickModelOk('select', 'select_lable')">
      <Table highlight-row :loading="personnelLoad" :columns="personnelColumns" :data="personnelListData"></Table>
      <Page style="margin-top: 10px;" @on-change="getPersonnelList" :total="personnelTotal" />
    </Modal>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabsName: 'load',
        loading: true,

        listDatas: [],
        total: 0,

        allocationModalZong: false,
        allocationModalFen: false,
        allocationModalFzr: false,

        info_zong: {},
        //负责人
        info_fenFzr: {},
        info_fen: {},

        project_number: '',

        changeInfo: {},
        lastSubmitValue: {},

        // 待分配
        loadColumns: [{
            title: '序号',
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '项目名称',
            key: 'project_name',
            width: 220,
            align: 'center'
          },
          {
            title: '公司级别',
            key: 'Project_level_name',
            align: 'center'
          },
          {
            title: '报告类型',
            key: 'report_type',
            align: 'center'
          },
          {
            title: '地区',
            key: 'build_address',
            align: 'center'
          },
          {
            title: '提交人',
            key: 'commit_name',
            align: 'center'
          },
          {
            title: '项目负责人',
            key: 'leader_name',
            align: 'center'
          },
          {
            title: '项目组成员',
            key: 'staff_names',
            align: 'center'
          },
          {
            title: '审核人员',
            key: 'auditors',
            align: 'center'
          },
          {
            title: '操作',
            key: 'opera',
            align: 'center',
            render: (h, params) => {
              return h("div", [
                h(
                  "Button", {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        console.log(params.row)
                        this.id = params.row.id
                        if (params.row.Project_level == 0) {
                          this.info_zong = {}
                          this.allocationModalZong = true
                        } else {
                          this.info_fen = {}
                          if (params.row.IsFcAssign == 0) {
                            this.allocationModalFzr = true
                          } else {
                            this.allocationModalFen = true
                          }
                        }
                      }
                    }
                  },
                  "分配"
                )
              ]);
            }
          }
        ],
        loadInfo: [],

        // 已分配
        allowColumns: [{
            title: '序号',
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '项目名称',
            key: 'project_name',
            width: 220,
            align: 'center'
          },
          {
            title: '公司级别',
            key: 'Project_level_name',
            align: 'center'
          },
          {
            title: '报告类型',
            key: 'report_type',
            align: 'center'
          },
          {
            title: '地区',
            key: 'build_address',
            align: 'center'
          },
          {
            title: '提交人',
            key: 'commit_name',
            align: 'center'
          },
          {
            title: '项目负责人',
            key: 'leader_name',
            align: 'center'
          },
          {
            title: '项目组成员',
            key: 'staff_names',
            align: 'center'
          },
          {
            title: '审核人员',
            key: 'auditors',
            align: 'center'
          },
          {
            title: '操作',
            key: 'opera',
            align: 'center',
            render: (h, params) => {
              return h("div", [
                h(
                  "Button", {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        console.log(params.row)
                        this.id = params.row.id
                        if (params.row.Project_level == 0) {
                          this.info_zong = {}
                          this.allocationModalZong = true
                        } else {
                          this.info_fen = {}
                          if (params.row.IsFcAssign == 0) {
                            this.allocationModalFzr = true
                          } else {
                            this.allocationModalFen = true
                          }
                        }
                      }
                    }
                  },
                  "编辑"
                )
              ]);
            }
          }
        ],
        allowInfo: [],

        // 工程师
        engineerLoad: false,
        engineerModel: false,
        engineerColumns: [{
            title: '序号',
            key: 'Member',
            align: 'center'
          },
          {
            title: '姓名',
            key: 'FullName'
          },
          {
            title: '等级证号',
            key: 'JobCompany'
          },
          {
            title: '等级规则',
            key: 'zongshu'
          },
          {
            title: '现有项目数量',
            key: 'fenshuliang'
          },
          {
            title: '操作',
            align: 'center',
            key: 'select',
            render: (h, params) => {
              return h('div', [
                h('Checkbox', {
                  props: {
                    value: params.row.select
                  },
                  on: {
                    'on-change': (e) => {
                      this.engineerListData.forEach((items) => {
                        this.$set(items, 'select', false)
                      });
                      this.engineerListData[params.index].select = e; //再将勾选的对象的checkBox设置为true

                      let info = this.changeInfo,
                        Member = params.row.Member,
                        FullName = params.row.FullName

                      this[info.company_type][info.input_name] = FullName
                      this[info.company_type][info.name] = Member

                      this.lastSubmitValue['checkBox'] = Member
                      this.lastSubmitValue['checkBox_lable'] = FullName
                    }
                  }
                }, )
              ]);
            }
          }
        ],
        engineerListData: [],
        engineerTotal: 0,

        // 人员库
        personnelLoad: true,
        personnelModel: false,
        personnelColumns: [{
            title: '序号',
            key: 'Member',
            align: 'center'
          },
          {
            title: '姓名',
            key: 'FullName'
          },
          {
            title: '等级证号',
            key: 'JobCompany'
          },
          {
            title: '等级规则',
            key: 'zongshu'
          },
          {
            title: '现有项目数量',
            key: 'fenshuliang'
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {

              let info = this.changeInfo

              return h('div', [
                h('Select', {
                    props: {
                      placeholder: '添加人员'
                    },
                    on: {
                      'on-change': (event) => {
                        let Member = params.row.Member,
                          FullName = params.row.FullName,
                          Members = this[info.company_type][info.name],
                          FullNames = this[info.company_type][info.input_name]

                        if (!Members) {
                          Members = []
                          FullNames = []
                        } else {
                          Members = Members.toString().split(',')
                          FullNames = FullNames.toString().split(',')
                        }

                        if (event == 2) {
                          Members.push(Member)
                          FullNames.push(FullName)
                        } else {
                          Members.remove(Member)
                          FullNames.remove(FullName)
                        }

                        Members = Members.join(',')
                        FullNames = FullNames.join(',')

                        this[info.company_type][info.name] = Members
                        this[info.company_type][info.input_name] = FullNames

                        this.lastSubmitValue['select'] = Members
                        this.lastSubmitValue['select_lable'] = FullNames
                      }
                    },
                  },
                  [
                    h('Option', {
                      props: {
                        value: '1'
                      }
                    }, '否'),
                    h('Option', {
                      props: {
                        value: '2'
                      }
                    }, '是')
                  ]
                )
              ]);
            }
          }
        ],
        personnelListData: [],
        personnelTotal: 0,
      }
    },
    mounted() {
      this.getEengineerlList(1)
      this.getPersonnelList(1)
      this.tabsClick(this.tabsName)
    },
    methods: {
      chengeFp(){
        console.log('asdfassadf')
      },
      // 提交
      submitFP(type) {
        let info = []
        // 总公司0 分公司1
        if (type == 0) {
          info = this.info_zong
        } else if (type == 2) {
          info = this.info_fen
        } else {
          info = this.info_fenFzr
        }
        info.Project_id = this.id
        if (type == 1) {
          axios.get('/assignjobs/setFCompany', {
            params: {
              Project_id: info.Project_id,
              Staff_name: info.Staff_name,
              Ysname: info.fname,
              Esname: info.zname
            }
          }).then(res => {
            let title = res._MESSAGE
            if (res._STATUS == 1) {
              this.$Message.success({
                content: title,
                duration: 2
              })
              this.getList(1)
            } else {
              this.$Message.error({
                content: title,
                duration: 2
              })
            }
          })
        } else {
          console.log(info)
          axios.get('/assignjobs/doassignjobs', {
            params: info,
          }).then((res) => {
            this.$Message.info(res._MESSAGE)
            this.getList(1)
          }).catch((err) => {
            this.$Message.error('崩了')
          })
        }

      },
      getEengineerlList(page) {
        this.engineerLoad = true
        axios.get('/assignjobs/showEngineer', {
          params: {
            PageIndex: page,
            type: 1
          }
        }).then((res) => {
          // 整理数据
          let engineerListDataAdd = res.data
          engineerListDataAdd.forEach((e, i) => {
            e['select'] = false
          });
          this.engineerListData = engineerListDataAdd
          this.engineerTotal = res.count
          this.engineerLoad = false
        })
      },
      getPersonnelList(page) {
        this.personnelLoad = true
        axios.get('/assignjobs/showEngineer', {
          params: {
            PageIndex: page,
          }
        }).then((res) => {
          this.personnelListData = res.data
          this.personnelTotal = res.count
          this.personnelLoad = false
        })
      },
      getList(page) {
        this.loading = true
        // 对于 isAssign 待分配为空 已分配 1
        let isAssign = this.tabsName === 'load' ? null : 1
        axios.get('/assignjobs/showFCProject', {
          params: {
            PageIndex: page,
            isAssign,
          }
        }).then((res) => {
          console.log(res)
          this.listDatas = res.data
          let listDatas = this.listDatas
          listDatas.forEach(e => {
            if (e.Project_level == 0) {
              e['Project_level_name'] = '总公司'
            } else {
              e['Project_level_name'] = '分公司'
            }
          });

          this.total = res.count
          this.loading = false

        })
      },
      changePage(page) {
        this.getList(page)
      },
      tabsClick(name) {
        this.listDatas = []
        this.tabsName = name
        this.getList(1)
      },
      show(type, company_type, input_name, name) {
        console.log(type, company_type, input_name, name)
        type = type === 'gcs' ? 'engineerModel' : 'personnelModel'
        company_type = company_type === 'zong' ? 'info_zong' : 'info_fenFzr'
        this.changeInfo = {
          company_type,
          input_name,
          name,
        }
        this[type] = true
      },
      show1(type, company_type, input_name, name) {
        type = type === 'gcs' ? 'engineerModel' : 'personnelModel'
        company_type = company_type === 'zong' ? 'info_zong' : 'info_fen'
        this.changeInfo = {
          company_type,
          input_name,
          name,
        }
        this[type] = true
      },
      clickModelOk(type, label_name) {
        // 直接确认则调用上次结果
        let info = this.changeInfo,
          name = this[info.company_type][info.name],
          value = this[info.company_type][info.input_name]
        if (!value) {
          this[info.company_type][info.input_name] = this.lastSubmitValue[label_name]
          this[info.company_type][info.name] = this.lastSubmitValue[type]
        }
      }
    },
  }
</script>

<style lang="less">
  .vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal {
      top: 0;
    }
  }

  .principal {
    background: yellow;
  }
</style>